<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>示例</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        ul{
            width:100px;
            height:60px;
            margin:30px auto;
        }
        ul li{
            border:1px solid #000000;
            line-height:60px;
            text-align:center;
            list-style:none;
            cursor:pointer;
        }
        ul li p{
            border:1px solid #ff000000;
            display:none;
        }
        ul li:hover p{
            display:block;
        }
        ul li p span{
            display:block;
            margin:5px 0;
            cursor:default;
            border-top:1px solid #999;
        }
    </style>
</head>
<body>
<ul>
    <li>用户名<p><span>1111111</span><span>2222222</span><span>3333333</span></p></li>
</ul>
<ul>
    <li>用户名<p><span>1111111</span><span>2222222</span><span>3333333</span></p></li>
</ul>
</body>
</html>